<template>
	<view>
		<view class="content">
			<!-- 头部 -->
			<view class="navbar">
				<view v-for="(item, index) in tablist" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }"
				 @click="tabClick(index)">
					{{ item.name }}
				</view>
			</view>
			<!-- 显示区域 -->
			<view class="list" v-for="(item, index) in tablist" :key="index" v-if="tabCurrentIndex === index">
				<k-scroll-view ref="k-scroll-view" :refreshType="refreshType" :refreshTip="refreshTip" :loadTip="loadTip"
				 :loadingTip="loadingTip" :emptyTip="emptyTip" :touchHeight="touchHeight" :height="height" :bottom="bottom"
				 :autoPullUp="autoPullUp" @onPullDown="handlePullDown" @onPullUp="handleLoadMore">
					<!-- {{ item.state }} -->
					<view class="list-cont" v-for="(item,index) in list" :key="index">
						<view class="list-img">
							<image class="img" src="../../../static/qualifications.png"></image>
						</view>
						<view class="list-flex">
							<view class="inv-list">
								<text class="inv-color">条 形 码 :</text>
								<text class="inv-color">{{item.barCode}}</text>
							</view>
							<view class="inv-list">
								<text class="inv-color">设备编码 :</text>
								<text class="inv-color">{{item.deviceCode}}</text>
							</view>
							<view class="inv-list">
								<text class="inv-color">设备名称 :</text>
								<text class="inv-color">{{item.deviceName}}</text>
							</view>

							<view class="inv-list">
								<text class="inv-color">盘点前管理部门 :</text>
								<text class="inv-color"> {{(item.checkManageDeptBeforeName)}} </text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点后管理部门 :</text>
								<text class="inv-color"> {{item.checkManageDeptAfterName}} </text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点前使用部门 :</text>
								<text class="inv-color"> {{(item.checkUseDeptBeforeName)}} </text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点后使用部门 :</text>
								<text class="inv-color"> {{item.checkUseDeptAfterName}} </text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点前位置 :</text>
								<text class="inv-color"> {{(item.checkPositionBeforeName)}} </text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点后位置 :</text>
								<text class="inv-color"> {{item.checkPositionAfterName}} </text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点前使用权 :</text>
								<text class="inv-color"> {{(item.checkUseRightBeforeName)}} </text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点后使用权 :</text>
								<text class="inv-color"> {{item.checkUseRightAfterName}}</text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点前责任人 :</text>
								<text class="inv-color"> {{(item.checkLiablePersonBeforeName)}} </text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点后责任人 :</text>
								<text class="inv-color"> {{item.checkLiablePersonAfterName}}</text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点前设备状态 :</text>
								<text class="inv-color"> {{(item.checkDeviceStateBeforeName)}}</text>
							</view>
							<view class="inv-list">
								<text class="inv-color">盘点后设备状态 :</text>
								<text class="inv-color"> {{item.checkDeviceStateAfterName}}</text>
							</view>
						</view>
					</view>
				</k-scroll-view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="button-con">
			<view class="button-return" @click="eamDevicaCheckForm">
				<view class="button">返回</view>
			</view>
		</view>

	</view>
</template>

<script>
	let _this = this
	let count = 0
	import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue'
	export default {
		data() {
			return {
				refreshType: 'custom',
				refreshTip: '正在下拉',
				loadTip: '获取更多数据',
				loadingTip: '正在加载中...',
				emptyTip: '没有更多数据了...',
				touchHeight: 50,
				height: 0,
				bottom: 50,
				autoPullUp: true,
				stopPullDown: true, // 如果为 false 则不使用下拉刷新，只进行上拉加载
				tabCurrentIndex: 0,
				currentPage: 1, // 初始页
				pagesize: 5, // 每页的数据
				checkBill: '',
				checkId: '',
				dataList: [],
				filterList: [],
				list: [],
				tablist: [{
					id: 1,
					name: '未盘',
					state: '1'

				}, {
					id: 2,
					name: '已盘',
					state: '2'
				}, {
					id: 3,
					name: '盘盈',
					state: '3'
				}, ]

			}
		},
		components: {
			kScrollView
		},
		onLoad(option) {
			_this = this;
			console.log("aaaa")
			console.log(option)
			this.checkBill = option.checkBill
			this.checkId = option.checkId
		},
		onShow() {
			console.log("onShow")
			this.findList()
		},
		methods: {
			handlePullDown(stopLoad) {
				this.list = this.list = this.filterList.slice((1 - 1) * this.pagesize, this.currentPage * this.pagesize)
				stopLoad ? stopLoad() : '';
			},
			handleLoadMore(stopLoad) {
				try {
					console.log("listsize" + _this.list.length)
					console.log("filterListsize" + _this.filterList.length)
					if (_this.list.length < _this.filterList.length) {
						this.currentPage++
						this.filterList.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize).forEach(
							item => {
								this.list.push(item)
							}
						)
						console.log(this.list)
						stopLoad ? stopLoad() : '';
					} else {
						stopLoad ? stopLoad({
							isEnd: true
						}) : '';
					}
				} catch (e) {
					console.log("handleLoadMore" + e)
				}
			},
			handleGoTop() {
				this.$refs['k-scroll-view'].goTop();
			},
			tabClick(index) {
				try {
					this.tabCurrentIndex = index;
					this.currentPage = 1
					this.pagesize = 5
					this.list = []
					if (index === 0) {
						this.filterList = this.$cloneDeep(this.dataList.filter(item =>
							_this.$validate.isNull(item.checkResult)
						)).slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize)
					}
					if (index === 1) {
						this.filterList = this.$cloneDeep(this.dataList.filter(item =>
							!_this.$validate.isNull(item.checkResult) && item.checkResult !== '0'
						)).slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize)
					}
					if (index === 2) {
						this.filterList = this.$cloneDeep(this.dataList.filter(item =>
							!_this.$validate.isNull(item.checkResult) && item.checkResult === '2'
						)).slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize)
					}
					this.handleLoadMore()
				} catch (e) {
					console.log("tabClick" + e)
				}
			},
			findList() {
				uni.showLoading({
					title: '加载中'
				});
				plus.sqlite.selectSql({
					name: 'first',
					sql: "SELECT * FROM EamDeviceCheck a LEFT JOIN EamDeviceCheckDetails b on a.id = b.checkId WHERE a.checkBill = '" +
						this.checkBill + "'",
					success: function(data) {
						console.log('findList ss: ' + data);
						try {
							_this.dataList = data
							_this.filterList = _this.$cloneDeep(_this.dataList.filter(item =>
								_this.$validate.isNull(item.checkResult)
							))
							_this.list = _this.filterList.slice((_this.currentPage - 1) * _this.pagesize, _this.currentPage * _this.pagesize)
							console.log("listsize" + _this.list.length)
							console.log("filterListsize" + _this.filterList.length)
							console.log("findList" + _this.filterList)
							uni.hideLoading();
						} catch (e) {
							console.log('findList try: ' + e);
						}
					},
					fail: function(e) {
						console.log('findList failed: ' + JSON.stringify(e));
					}
				});
			},
			eamDevicaCheckForm() {
				uni.redirectTo({
					url: '/pages/eam/eamDeviceCheck/eamDeviceCheckForm?checkBill=' + this.checkBill + '&checkId=' + this.checkId
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	// tab栏
	.navbar {
		display: flex;
		padding: 15px 0 10px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		z-index: 9;

		.nav-item {
			flex: 1;
			text-align: center;
			border-right: 1px solid #ccc;
			padding-bottom: 10px;
		}

		.nav-item:last-child {
			border-right: 0;
		}
	}

	// 列表内容
	.list {
		position: absolute;
		top: 45px;
		left: 0;
		right: 0;
		margin-bottom: 55px;

		.list-cont {
			display: flex;
			padding: 10px 0;
			border-bottom: 1px solid #ccc;

			.list-img {
				flex: 30%;
				position: relative;
				top: 0;
				left: 0;
				right: 0;

				.img {
					width: 50px;
					height: 50px;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.list-flex {
				flex: 70%;

				.inv-list {
					padding: 2px;

					.inv-color:nth-child(1) {
						text-align: right;
					}

					.inv-color:nth-child(2) {
						color: #666;
						padding-left: 10px;
					}
				}
			}
		}
	}

	.list-cont:last-child {
		border-bottom: 0;
	}

	// 当前tab
	.current {
		border-bottom: 3px solid #799cb3;
	}
</style>
